<template>
  <div class="dog-food">
    <!-- 顶部导航栏 -->
    <van-tabs v-model="active">
      <van-tab title="分类">
        <div class="content">
          <!-- 侧边导航 -->
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              v-for="item in nav"
              :key="item.cateid"
              :title="item.name"
            />
          </van-sidebar>
          <!-- 产品内容 -->
          <div class="product-content">
            <!-- 狗狗主粮 -->
            <div class="product">
              <!-- 导航栏 -->
              <van-nav-bar
                :left-text="food.title"
                right-text="全部 >"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
              />
              <!-- 产品列表 -->
              <van-grid square>
                <van-grid-item
                  v-for="item in food.list"
                  :key="item.id_param"
                  :icon="item.photo"
                  :text="item.name"
                />
              </van-grid>
            </div>

            <!-- 热门品牌 -->
            <div class="hot-brand">
              <!-- 导航栏 -->
              <van-nav-bar :left-text="brand.title" />
              <!-- 产品列表 -->
              <van-grid square>
                <van-grid-item
                  v-for="item in brand.list"
                  :key="item.target.param"
                  :icon="item.logo"
                  :text="item.name"
                />
              </van-grid>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="品牌">
        <div class="module" v-for="item in brandP" :key="item.title">
          <div class="top-title">
            <van-divider>{{ item.title }}</van-divider>
          </div>
          <div class="brand-list">
            <van-grid :gutter="10">
              <van-grid-item
                v-for="logo in item.list"
                :key="logo.target.param"
                :icon="logo.logo"
                :text="logo.name"
              />
            </van-grid>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  props: {
    nav: {
      type: Array,
      default: () => [],
    },
    page: {
      type: Array,
      default: () => [],
    },
    brandP: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      food: {},
      brand: {},
      active: 2,
      activeKey: 0,
    };
  },
  methods: {
    onClickLeft() {
      console.log("狗狗");
    },
    onClickRight() {
      console.log("全部");
    },
  },
  watch: {
    page: {
      handler(val) {
        let [food, brand] = val;
        this.food = food;
        this.brand = brand;
      },
    },
  },
};
</script>

<style lang="scss">
.dog-food {
  width: 375px;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 52px;
  .van-tabs {
    position: relative;
  }
  //   顶部导航
  .van-tabs__wrap {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    .van-tab__text--ellipsis {
      font-weight: 700;
    }
    .van-tab--active {
      color: #74be5f;
    }
    .van-tabs__line {
      background-color: #74be5f;
    }
  }
  //   页面内容
  .van-tabs__content {
    height: 100%;
    margin-top: 50px;
    .content {
      height: 100%;
      background-color: #fff;
      display: flex;
      margin-top: 5px;
      .van-sidebar {
        position: fixed;
        top: 50px;
        left: 0;
        z-index: 1;
        width: 70px;
        min-height: 550px;
        padding-bottom: 45px;
        background-color: #fff;
        border-right: 5px solid #f3f4f5;
      }
      .van-sidebar-item {
        width: 70px;
        height: 50px;
        padding: 15px 0;
        text-align: center;
        background-color: #fff;
        &.van-sidebar-item--select {
          background-color: #f3f4f5;
          &::before {
            background-color: transparent;
          }
        }
      }
      // 产品内容
      .product-content {
        width: 300px;
        padding-left: 75px;
        padding-bottom: 50px;
        overflow: hidden;
        //产品导航
        .van-nav-bar__content {
          width: 290px;
          .van-icon {
            display: none;
          }
          .van-nav-bar__text {
            color: #999;
          }
        }
        .product {
          //产品列表
          .van-grid-item {
            flex-basis: 33.3% !important;
            height: 116px;
            [class*="van-hairline"]::after {
              border: none;
            }
            .van-grid-item__icon {
              font-size: 86px;
            }
          }
        }
        .hot-brand {
          .van-grid-item {
            flex-basis: 50% !important;
            height: 80px;
            [class*="van-hairline"]::after {
              border: none;
            }
            .van-grid-item__icon {
              img {
                width: 107px;
                height: 45px;
              }
            }
          }
        }
      }
    }
  }
  //   品牌页面
  .module {
    background-color: #fff;
    margin-bottom: 10px;

    .top-title {
      display: flex;
      justify-content: center;
      .van-divider {
        width: 50%;
        background-color: #fff;
        margin: 0;
        padding: 16px 0;
        color: #999;
        border-color: #999;
      }
    }

    .brand-list {
      .van-grid {
        .van-grid-item {
          width: 111px;
          flex-basis: 33.3% !important;
          .van-grid-item__content {
            &::after {
              border-width: 0;
            }
            .van-grid-item__content--surround::after {
              border-width: 0;
            }
            .van-grid-item__icon {
              width: 111px;
              height: 60px;
              border: 1px solid #e2e2e2;
              .van-icon__image {
                width: 95px;
                height: 40px;
                margin: 10px auto 0 auto;
              }
            }
            .van-grid-item__text {
              height: 20px;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
</style>